<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../dist/mermaid.forest.css"/>

<scrpt src="../node_modules/d3/d3.js"></scrpt>
  <script src="../dist/mermaid.js"></script>
  <scrpt src="../dist/mermaid.full.js"></scrpt>
  <style type="text/css">
html {
  font-family: 'trebuchet ms', verdana, arial;
  color: #333333;
}
  </style>
    <script>
    //browserify --entry src/mermaid.js -u d3 -o ./dist/mermaid.brow.slim.js
        var mermaid_config = {
            startOnLoad:true
        }
        mermaid.ganttConfig = {
            titleTopMargin:25,
            barHeight:20,
            barGap:4,
            topPadding:50,
            leftPadding:75,
            gridLineStartPadding:35,
            fontSize:11,
            numberSectionStyles:3,
            axisFormatter: [
                // Within a day
                ["%I:%M", function (d) {
                    return d.getHours();
                }],
                // Monday a week
                ["w. %U", function (d) {
                    return d.getDay() == 1;
                }],
                // Day within a week (not monday)
                ["%a %d", function (d) {
                    return d.getDay() && d.getDate() != 1;
                }],
                // within a month
                ["%b %d", function (d) {
                    return d.getDate() != 1;
                }],
                // Month
                ["%m-%y", function (d) {
                    return d.getMonth();
                }]
            ]
        };
    </script>
    <script>
        function apa(){
            console.log('CLICKED');
        }
    </script>
    <lnk rel="stylesheet" href="seq.css"/>
</head>
    <body>

    <div  class="mermaid">
        graph TB
            subgraph LevelAB1s
                subgraph LevelAB1C1
                    d1-->d2
                end
                subgraph X
                    x["nX"]-- "link" -->x2["nX2 您好"]
                end
            end
    </div>
    <div class="mermaid">graph TB
        c1-->a2
        subgraph one
        a1-->a2
        end
        subgraph two
        b1-->b2
        end
        subgraph three
        c1-->c2
        end</div>
    <div class="mermaid">
        graph TB
        subgraph A
            subgraph AA
                aa1 --> aa2
                aa1 --> aa3
                subgraph New top
                    nt1 --> nt2
                    nt1 --> nt3
                end
            end
            subgraph AB
                ab1 --> ab2
                ab1 --> ab3
            end
        end
    </div>
    <div class="mermaid">
        sequenceDiagram
            A->> B: Query
            B->> C: Forward query
            Note right of C: Thinking...
            C->> B: Response
            B->> A: Forward response

    </div>

    <div class="mermaid">
        graph TB
            ab1 -- tjojho --> ab3
    </div>
        <div class="mermaid">
gantt
    dateFormat yyyy-mm-dd
    title Adding gantt diagram functionality to mermaid

    section Design
        Design jison grammar            :des1, 2014-01-01, 2014-01-04
        Create example text             :des2, 2014-01-01, 3d
        Bounce gantt example with users :des3, after des2, 5d

    section Implementation
        update build script             :2014-01-02,1h
        Implement parser and jison      :after des1, 2d
        Create tests for parser         :3d
        Create renderer                 :5d
        Create tests for renderer       :2d
        Add to mermaid core             :1d

    section Documentation
        Describe gantt syntax               :a1, 2014-01-01, 3d
        Add gantt diagram to demo page      :after a1  , 2h
        Add gantt to diagram to demo page   :after a1  , 2h    </div>
  
    </body>
</html>
